<script lang="tsx">
import type { CSSProperties, PropType } from "vue";
import { defineComponent, computed, unref } from "vue";
import { Tooltip } from "ant-design-vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import { getPopupContainer } from "/@/utils";
import { isString, isArray } from "/@/utils/Is";
import { getSlot } from "/@/utils/helper/TsxHelper";
import { useDesign } from "/@/hooks/web/UseDesign";

const props = {
  /**
   * Help text max-width
   * @default: 600px
   */
  maxWidth: { type: String, default: "600px" },
  /**
   * Whether to display the serial number
   * @default: false
   */
  showIndex: { type: Boolean },
  /**
   * Help text font color
   * @default: #ffffff
   */
  color: { type: String, default: "#ffffff" },
  /**
   * Help text font size
   * @default: 14px
   */
  fontSize: { type: String, default: "14px" },
  /**
   * Help text list
   */
  placement: { type: String, default: "right" },
  /**
   * Help text list
   */
  text: { type: [Array, String] as PropType<string[] | string> }
};

export default defineComponent({
  name: "BasicHelp",
  components: { Tooltip },
  props,
  setup(props, { slots }) {
    const { prefixCls } = useDesign("basic-help");

    const getTooltipStyle = computed(
      (): CSSProperties => ({ color: props.color, fontSize: props.fontSize })
    );

    const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));

    function renderTitle() {
      const textList = props.text;

      if (isString(textList)) {
        return <p>{textList}</p>;
      }

      if (isArray(textList)) {
        return textList.map((text, index) => {
          return (
            <p key={text}>
              <>
                {props.showIndex ? `${index + 1}. ` : ""}
                {text}
              </>
            </p>
          );
        });
      }
      return null;
    }

    return () => {
      return (
        <Tooltip
          overlayClassName={`${prefixCls}__wrap`}
          title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
          autoAdjustOverflow={true}
          overlayStyle={unref(getOverlayStyle)}
          placement={props.placement as "right"}
          getPopupContainer={() => getPopupContainer()}
        >
          <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
        </Tooltip>
      );
    };
  }
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-help';

.@{prefix-cls} {
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  color: @text-color-help-dark;
  cursor: pointer;

  &:hover {
    color: @primary-color;
  }

  &__wrap {
    p {
      margin-bottom: 0;
    }
  }
}
</style>
